<template>
	<view class="bg-cF6F7FB">
		<catalogue></catalogue>
		<view class="bg">
			<image class="w-100 h-100" :src="`${cosUrl}/bg/banner_custom_website.png`" mode=""></image>
		</view>
		<bread :textArr="['首页', '定制开发', '网站定制开发']"></bread>
		
		
		<view class="" style="padding-top: 96rpx;">
			<view class="title-zh d-flex justify-content-center">
				<view class="">对网站定制</view>
				<text>有丰富的经验</text>
			</view>
			<view class="title-en text-center">
				STRONG EXPERTISE
			</view>
			<view class="line" style="margin-left: 24rpx;">
			</view>
			<view class="content">
				<view class="pt-1">
					虽然在移动时代，浏览企业网站仍然是很多用户了解一个企业的重要方式，也是很多应用后台的管理平台
				</view>
				<view class="py-3">
					成都亚克西科技擅长对企业官网和功能性网站的设计和开发，开发经验包括社交，视频，电影，音乐，资源分享等各种网站。服务过超过700多家企事业单位，在过程中不但帮助服务对象进行产品功能的完成，也帮助客户进行品牌的塑造，同时用自己的专业提供运营，推广，搜索优化等服务
				</view>
				<view class="pb-1">
					用我们专业的互联网技术帮助客户业务的成长
				</view>
			</view>
			
			<view class="title-zh d-flex justify-content-center ">
				<text>关于</text>
				<view class="">网站制作</view>
			</view>
			<view class="title-en text-center pb-24">
				ABOUT WEBSITE
			</view>
			<view class="share_item" v-for="v,i in shares" :key="i" @tap="jumpBlogDetail(v)">
				<view class="left_image">
					<image src="@/static/website/play.png" class="play"></image>
					<image :src="v.coverimage" mode="aspectFit" class="coverimage"></image>
				</view>
				<view class="right_text">
					<view class="title">{{ v.name }}</view>
					<view class="summary">{{ v.summary | substring(30) }}</view>
					<view class="collection">所属合集：{{ v.sharecollection.collection_name }}</view>
					<view class="updatetime">更新于{{ v.updatedate * 1000 | formatDate }}</view>
				</view>
			</view>
			
		</view>
		<view class="" style="padding-top: 80rpx;">
			<view class="title-zh d-flex justify-content-center">
				<text>网站</text>
				<view class="">设计案例</view>
			</view>
			<view class="title-en text-center pb-4">
				WEBSITE DESIGN CASE
			</view>
			<view class="list" v-for="v,i in examples" :key="i" @tap="jumpGO('website/casePresentationDetail?id='+v.id)">
				<view class="bg-white brs-8 pb-1 position-relative">
					<image :src="1 == v.type.id ? '../../static/website/case_h5.png' : '../../static/website/case_miniapp.png'" class="case_flag"></image>
					<image :src="v.coverimage" mode="" style="height: 528rpx;" class="coverimage"></image>
					<view class="title">{{v.name}}</view>
					<view class="type d-flex">
						<view class="">
							类型-{{v.type.type_name}}
						</view>
						<view class="">
							行业-{{v.industry.industry_name}}
						</view>
					</view>
				</view>
			</view>
			<view style="padding: 0 24rpx;">
				<view class="more">
					<view class="d-flex title justify-content-center align-items-center"
						@tap="jumpGO('website/casePresentation')">
						<image src="../../static/website/more.svg" mode=""></image>
						<view class="text">更多案例</view>
					</view>
					<view class="row row-cols-3 mx-0">
						<view class=" px-1 kind" v-for="v,i in anliList" :key="i" @click="gotoExamplelistPage(v)">
							{{v.name}}({{v.count}})
						</view>
						<view class=" px-1 kind" @click="jumpGO('website/casePresentation')">
							更多行业…
						</view>
					</view>
				</view>
			</view>
			<view style="padding-top: 96rpx;">
				<Footer title="只有优秀的应用UI设计才能给用户植入产品" celebrity="亚克茜"></Footer>
			</view>
			<view class="gotop" @click="goTop" v-show="scrollNum>300">
				<image src="@/static/website/back.png" style="width: 140rpx;height: 140rpx;" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http_websitedeveloppage,
	} from '@/common/api.js';
	export default {
		data() {
			return {
				shares: [],
				examples: [],
				status: false,
				anliList: [],
			}
		},
		onLoad() {
			this.shareTitle = '网站定制开发'
			this.shareDesc = '亚克西科技擅长对企业官网和功能性网站的设计和开发，开发经验包括社交，视频，电影，音乐，资源分享等各种网站。服务过超过700多家企事业单位'
			this.share5v4Image = `${this.cosUrl}/bg/banner_custom_website.png`
			this.share1v1Image = `${this.cosUrl}/bg/shareimage_devwebsite_1v1.png`
			http_websitedeveloppage()
				.then((res) => {
					console.log(res);
					if (1 == res.code) {
						this.shares = res.data.shares
						this.examples = res.data.examples
						this.anliList = res.data.industry_types

					}
				})
		},
		methods: {
			jumpGO(url) {
				uni.navigateTo({
					url: `/pages/${url}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.case_num {
		font-size: 24rpx;
		color: #F2F2F2;
		padding-left: 8rpx;
	}

	.case_num_1 {
		font-size: 24rpx;
		color: #909193;
		padding-left: 8rpx;
	}

	.bg {
		width: 100%;
		height: 546rpx;
	}

	.title-zh {
		font-size: 40rpx;
		font-weight: 400;
		color: #303133;
		line-height: 56rpx;

		>text {
			color: #40C6A1;
		}
	}

	.title-en {
		font-size: 28rpx;
		font-weight: 300;
		color: #C0C4CC;
		line-height: 40rpx;
	}

	.line {
		width: 180rpx;
		padding-bottom: 48rpx;
		border-bottom: 2rpx solid #40C6A1;
	}
	
	.share_item {
		display: flex;
		flex-direction: row;
		margin: 24rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		height: 452rpx;
		
		.left_image {
			position: relative;
			overflow: hidden;
			width: 340rpx;
			height: 100%;
			.play {
				width: 52rpx;
				height: 52rpx;
				position: absolute;
				top: 18rpx;
				right: 18rpx;
				z-index: 100;
			}
			.coverimage {
				border-radius: 16rpx 0 0 16rpx;
				width: 100%; /* 图片宽度 */
				height: 100%; /* 高度自适应 */
				object-fit: cover; /* 图片填充方式，保持纵横比并填充整个容器 */
			}
		}
		.right_text {
			position: relative;
			flex-shrink: 1;
			padding: 24rpx 16rpx;
			.title {
				font-weight: 500;
				font-size: 36rpx;
				line-height: 50rpx;			
				color: #303133;
			}
			.summary {
				margin-top: 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 42rpx;
				height: 126rpx;
				color: #606266;
			}
			.collection {
				position: absolute;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 42rpx;
				color: #40C6A1;
				bottom: 90rpx;
			}
			.updatetime {
				position: absolute;
				bottom: 32rpx;
				font-weight: 300;
				font-size: 28rpx;
				line-height: 40rpx;			
				color: #909193;
			}
		}
		
	}

	.content {
		padding: 48rpx 24rpx 96rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #606266;
		line-height: 52rpx;
	}

	.puase {
		width: 144rpx;
		height: 144rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.num {
		padding: 18rpx 0;
		bottom: 0;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.video-text {
		padding-top: 24rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #606266;
		line-height: 50rpx;
	}

	.list {
		.bg-white {
			background: #fff;
		}

		padding: 0 24rpx 32rpx;
		border-radius: 16rpx;

		.case_flag {
			width: 160rpx;
			height: 160rpx;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 10;
		}
			
		.coverimage {
			width: 100%;
			height: 256px;
			border-radius: 16rpx 16rpx 0px 0px;
		}

		.title {
			font-size: 36rpx;
			color: #303133;
			line-height: 50rpx;
			padding-left: 34rpx;
			padding-top: 24rpx;
		}

		.type {
			font-size: 24rpx;
			font-weight: 300;
			color: #909193;
			line-height: 34rpx;

			>view {
				padding-left: 32rpx;
				padding-top: 16rpx;
				padding-bottom: 16rpx;
			}
		}

		.nums {
			padding: 0 32rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.more {
		padding: 0 22rpx;
		background: #6FB19F;
		border-radius: 16rpx;

		.title {
			padding: 48rpx 0 32rpx;

			.text {
				font-size: 40rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 56rpx;
				padding-left: 32rpx;
			}
		}

		image {
			width: 52rpx;
			height: 52rpx;
		}

		.kind {
			font-size: 36rpx;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 50rpx;
			padding-bottom: 32rpx;
		}
	}
</style>
